<template>
    <div>
        <!-- 树形菜单 -->
        <el-aside width="190px" style="background-color: rgb(238, 241, 246); background: #fff;" class="treeBox">
            <el-menu :default-openeds="['1', '3']">
                <el-tree :data="tree_list" :default-expand-all="true" :highlight-current="true" ref="treeBox"
                    node-key="areaCode" :default-expanded-keys="treeExpandData" :props="{
                        checkStrictly: true,
                        label: 'areaName',
                        value: 'areaCode',
                    }" @node-click="handleNodeClick"></el-tree>
            </el-menu>
        </el-aside>
    </div>
</template>
  
<script>
import { ref, reactive, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import api from "../api/api";
import { getDefault } from "../assets/js/getcampusList";
export default {
    name: "basetable",
    setup(props, ctx) {
        const router = useRouter();
        const route = useRoute();
        const tree_list = ref(ctx.attrs.tree_list);
        const treeExpandData = ref([]);
        const treeBox = ref("");
        const getareaTree = () => {
            // setTimeout(() => {
            treeExpandData.value = getDefault(tree_list.value);
            // 默认高亮显示第一个子节点
            if (treeExpandData.value && treeExpandData.value[0]) {
                nextTick(function () {
                    treeBox.value.setCurrentKey(treeExpandData.value[0]);
                });
            }
            // },100);
            setTimeout(() => {
                getareaTreeList(tree_list.value);
            }, 5000);
        };
        getareaTree();
        const getareaTreeList = (list) => {
            return list;
        };
        const handleNodeClick = (res) => {
            ctx.emit("handle", res);
        };
        return {
            treeBox,
            treeExpandData,
            tree_list,
            getareaTreeList,
            handleNodeClick,
        };
    },
};
</script>
  
<style lang="less" scoped>
@import "../assets/css/common.css";

.content {
    background: #fff;
}

.el-menu {
    position: absolute;
    height: 100%;
    overflow: auto;
    width: 190px;
    z-index: 999;
}

.exportbtn {
    width: 80px;
    margin-bottom: 20px;
}

.exportbtn1 {
    margin-left: 70px;
}

.content_info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
}

.info {
    /* width:150px; */
    text-align: center;
    padding: 2px 5px;
    margin-right: 30px;
    margin-top: 20px;
}

.select_info {
    /* width:150px; */
    text-align: center;
    padding: 2px 5px;
    margin-right: 30px;
    margin-top: 20px;
    border: 1px solid #999999;
    border-radius: 5px;
}

.el-overlay1 {
    background-color: none !important;
}

.el-menu {
    // border-right: none;
}

&:deep(.treeBox .el-tree-node__content) {
    height: 60px;
    line-height: 60px;
    font-size: 24px;
}
</style>
  